<!DOCTYPE html>
<html lang="en">
<head>
    {% load staticfiles %}
    {% load my_filters %}
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <title>个人中心-{{ user.nick }}</title>
    <link rel="stylesheet" href="{% static 'css/qixiaobao.css' %}">
    <script type="text/javascript" src="{% static 'lib/layui/layui.js' %}" charset="utf-8"></script>
    <script type="text/javascript" src="{% static 'js/jquery.min.js' %}" charset="utf-8"></script>
    <script type="text/javascript" src="{% static 'lib/jquery.cookie.js' %}" charset="utf-8"></script>
    <script type="text/javascript" src="{% static 'lib/jquery.downCount.js' %}" charset="utf-8"></script>
    <script type="text/javascript" src="{% static 'js/xadmin.js' %}"></script>
</head>
{% autoescape off %}
    <body>
    <style>
        body {
            text-align: center;
            color: white;
        }

        .top_area {
            background-color: {{ artical_color|default:'#e20e35'}};
            border-radius: 0 0 32px 32px;
            padding: 64px 64px 64px 64px;

        }

        .act_main {
            position: relative;
            top: -120px;
            width: 90%;
            height: 100%;
            background-color: #faf9f9;
            margin: 40px auto 40px auto;
            box-shadow: 10px 10px 10px rgba(104, 103, 103, 0.39);
            padding-bottom: 32px;
            border-radius: .5rem;
            color: black;
            text-align: left;
        }

        .shop_logo {
            display: inline-block;
            float: left;
            width: 2rem;
            height: 2rem;
            border-radius: 0.2rem;
        }

        .shop_title {
            font-size: 32px;
            margin-top: 20px;
            padding-left: 20px;
            line-height: 2rem;
            font-weight: 600;
        }

        .title {
            position: relative;
            top: 32px;
            padding: 1rem 2rem 3rem 2rem;
            font-size: 1.1rem;
            font-weight: 500;
        }

        .act_title {
            width: 100%;
            font-weight: 500;
            font-size: 1rem;
            padding-left: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .pd1rem {
            padding: 1rem 0 0 1rem;
        }

        .inline_dis {
            display: inline-block;
        }

        .act_img {
            width: 300px;
            height: 300px;
            border-radius: 30px;
        }

        .text_important {
            position: relative;
            top: -15px;
            color: {{ artical_color|default:'#e20e35'}};
            font-size: 1.5em;
        }

        .f_right {
            display: inline-block;
            float: right;
        }

        .real_price {
            padding-top: 1rem;
        }

        .mst_info {
            color: #4E5465;
            padding-left: 20px;
            padding-top: 1rem;
        }

        .btn_nomal {
            margin-right: 2rem;
            background-color: {{ artical_color|default:'#e20e35'}};
            border-radius: 30px;
            padding: 5px 20px;
            color: white;
        }

        .order_state {
            display: inline-block;
            padding-right: 1rem;
            float: right;
            color: {{ artical_color|default:'#e20e35'}};
            line-height: 2rem;
            font-weight: 600;
        }
    </style>

    <div class="top_area">
        <img class="joiner_logo" src="{{ user.logo }}">
        <p class="title">{{ user.nick }}</p>
    </div>
    {% for master in kan_master_list %}
        <div class="act_main">
            <div class="shop_info pd1rem">
                <img class="shop_logo" src="{{ master.info.shop.get_logo_url }}">
                <span class="shop_title">{{ master.info.shop.title }}</span>
                {% if master.order %}
                    <div class="order_state">{{ master.order.get_state_display }}</div>
                {% else %}
                    <div class="order_state">砍价中</div>
                {% endif %}
            </div>
            <hr class="" style="margin: 1rem 1rem 0 1rem;">
            <div class="act_info pd1rem"
                 onclick="location.href='{% url "wehelp:join" master.info.id %}?shop={{ master.info.shop_id }}'">
                <img class="act_img inline_dis" src="{{ master.info.get_image_url }}">
                <div class="inline_dis" style="width: 60%;">
                    <span class="act_title inline_dis">{{ master.info.title }}</span>
                    <div class="real_price f_right">
                        <span class="text_important ">¥ {{ master.real_price|div100 }}</span>
                        <span class="">* 1</span>
                    </div>
                    <div class="mst_info"><span class="">姓名 ：</span>{{ master.name }}</div>
                    <div class="mst_info"><span class="">手机 ：</span>{{ master.phone }}</div>
                    <div class="mst_info">
                        {% if master.order %}
                            {% if master.order.state == 3 %}
                                <span class="btn_nomal">确认收货</span>
                            {% endif %}
                        {% endif %}
                        <span class="btn_nomal">分享好友</span>
                    </div>
                </div>

            </div>
            <hr class="" style="margin: 1rem 1rem 0 1rem;">
            {% if master.order %}
                <div class="pd1rem">
                    订单号：
                    <span>{{ master.order_id }}</span>
                </div>
            {% else %}
                <div class="pd1rem">
                    暂未下单
                </div>
            {% endif %}

        </div>
    {% endfor %}
    <script>
        function timer(element, card_time) {
            console.log(card_time)
            element.downCount({
                //时间格式转换
                date: card_time,
                offset: +8 //抵消，减去时间差
            }, function () {
                location.reload()
            });
        }

        $(".music_logo").click(function () {
            playPause()
            if ($(this).hasClass('super_round') == false) {
                $(this).addClass('super_round')
            } else {
                $(this).removeClass("super_round")
            }
        })
        $(function () {

        });

        function join_now() {
            let data = $('.join_info_form').serialize();
            console.log(data)
            $.ajax({
                async: false,//这一步是非常重要的，作用是设置为同步执行
                type: "POST",
                data: $('.join_info_form').serialize(),
                dataType: "json",
                success: function (res) {
                    console.log(res);
                    if (res.status == 0) {
                        alert('报名成功！')
                        location.reload()
                    } else if (res.status == 1) {
                        alert(res.detail)
                        location.reload()
                    } else {
                        for (var key in res.detail) {
                            var item = res.detail[key];
                            alert(item[0]); //AA,BB,CC,DD
                            break;
                        }
                    }

                },
                error: function (res) {
                    alert(res)
                }
            });
        }

        /* 音乐播放暂停 */
        function playPause() {
            var music = document.getElementById('media');
            if (music.paused) {
                music.play();
            } else {
                music.pause();
            }

        }
    </script>
    {% if sign %}
        <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
        <script type="text/javascript">
            wx.config({
                debug: false,
                appId: '{{ sign.appId}}',
                timestamp: {{ sign.timestamp }},
                nonceStr: '{{ sign.nonceStr }}',
                signature: '{{ sign.signature }}',
                jsApiList: [
                    'onMenuShareAppMessage',
                    'hideMenuItems'
                ]
            });

            wx.ready(function () {
                // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
                wx.checkJsApi({
                    jsApiList: [
                        'onMenuShareAppMessage',
                        'hideMenuItems'
                    ],
                    success: function (res) {
                    }
                });

                wx.hideMenuItems({
                    menuList: ['menuItem:share:timeline']
                });

                // 2. 分享接口
                // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
                wx.onMenuShareAppMessage({
                    title: '{{ master.info.title|linebreaksbr|striptags }}',
                    link: '{{ sign.share_url|safe }}',
                    desc: '这波操作稳了！我参加了“{{ master.info.title|linebreaksbr|striptags }}”的活动，快来帮我减价',
                    imgUrl: '{{ master.info.get_image_url }}',
                    trigger: function (res) {
                    },
                    success: function (res) {
                        //share_link_count();
                    },
                    cancel: function (res) {
                    },
                    fail: function (res) {
                    }
                });
            });
        </script>
    {% endif %}
    </body>
{% endautoescape %}
</html>